import route from '@/router/index'

export function drawGalaxy (articleTypeList) {
  let canvas = document.getElementById('galaxy')
  let context = canvas.getContext('2d')
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  let canvasValue = {
    width: canvas.width,
    height: canvas.height,
    hypotenuse: Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height)
  }

  const r = 45
  const num = articleTypeList.length
  let comingNum = 1
  let fixedStar = {
    r: r,
    num: num,
    existArr: [0],
    distance: (canvasValue.hypotenuse - (4 + 2 * num) * r) / (num + 1),
    colors: [[255, 255, 255], [255, 0, 0], [255, 165, 0], [255, 255, 0],
      [0, 255, 0], [0, 127, 255], [0, 0, 255], [139, 0, 255]]
  }
  // console.log((canvasValue.hypotenuse - r) / (num + 1) - 2 * r)
  // console.log((canvasValue.hypotenuse - (4 + 2 * num) * r) / (num + 1))
  let meteor = {
    x: 0,
    y: 0,
    r: 6,
    color: 'rgb(255,255,255)'
  }

  let fixedStarCanvas = document.createElement('canvas')
  let fixedStarCtx = fixedStarCanvas.getContext('2d')
  fixedStarCanvas.width = canvasValue.width
  fixedStarCanvas.height = canvasValue.height
  context.globalCompositeOperation = 'destination-over'

  setTimeout(function () {
    update(meteor, fixedStar, comingNum, canvasValue, articleTypeList, context, fixedStarCtx, fixedStarCanvas)
  }, 1000)

  canvas.onmousedown = function (e) {
    mouseDown(fixedStar, canvasValue, articleTypeList, e)
  }
}
// 流星轨道
function update (meteor, fixedStar, comingNum, canvasValue, articleTypeList, context, fixedStarCtx, fixedStarCanvas) {
  if (!fixedStar.existArr[comingNum]) {
    // 椭圆运动
    let totalTime = 100
    for (let per = 1; per <= totalTime; per++) {
      setTimeout(function () {
        updateOval(meteor, per / totalTime, fixedStar, comingNum, canvasValue)
        drawMeteor(meteor, per / totalTime, fixedStar, comingNum, context)
        updateFixedStar(fixedStar, comingNum, canvasValue, articleTypeList, fixedStarCtx, fixedStarCanvas, context)
        sleep(1)
      }, 1)
    }
    fixedStar.existArr[comingNum] = 1

    if (comingNum <= fixedStar.num) {
      update(meteor, fixedStar, comingNum, canvasValue, articleTypeList, context, fixedStarCtx, fixedStarCanvas)
    } else {
      setTimeout(function () {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height)
        updateFixedStar(fixedStar, comingNum, canvasValue, articleTypeList, fixedStarCtx, fixedStarCanvas, context)
      }, 1)
    }
  } else if (fixedStar.existArr[comingNum] === 1) {
    // 圆周运动
    let totalTime = 50
    for (let per = 1; per <= totalTime; per++) {
      setTimeout(function () {
        updateArc(meteor, per / totalTime, fixedStar, comingNum, canvasValue)
        drawMeteor(meteor, 1, fixedStar, comingNum, context)
        updateFixedStar(fixedStar, comingNum, canvasValue, articleTypeList, fixedStarCtx, fixedStarCanvas, context)
        sleep(1)
      }, 1)
    }
    fixedStar.existArr[comingNum] = 2

    if (comingNum <= fixedStar.num) {
      update(meteor, fixedStar, comingNum + 1, canvasValue, articleTypeList, context, fixedStarCtx, fixedStarCanvas)
    }
  }
}
// 流星椭圆轨道
function updateOval (meteor, per, fixStar, comingNum, canvasValue) {
  let distanceMin = (2 * fixStar.r + fixStar.distance) * (comingNum - 1)
  let distanceMax = distanceMin + 4 * fixStar.r + fixStar.distance
  let xMin = distanceMin * canvasValue.width / canvasValue.hypotenuse
  let xMax = distanceMax * canvasValue.width / canvasValue.hypotenuse
  let yMin = distanceMin * canvasValue.height / canvasValue.hypotenuse
  let yMax = distanceMax * canvasValue.height / canvasValue.hypotenuse
  let a = xMax - xMin
  let b = yMax - yMin
  meteor.x = xMin + (xMax - xMin) * per
  meteor.y = yMax - Math.sqrt(b * b * (a * a - (meteor.x - xMin) * (meteor.x - xMin)) / (a * a))
}
// 流星椭圆轨道
function updateArc (meteor, per, fixStar, comingNum, canvasValue) {
  let distanceMin = (2 * fixStar.r + fixStar.distance) * comingNum
  let distanceMdd = distanceMin + fixStar.r
  let xMdd = distanceMdd * canvasValue.width / canvasValue.hypotenuse
  let yMdd = distanceMdd * canvasValue.height / canvasValue.hypotenuse

  let o = Math.acos(canvasValue.height / canvasValue.width)
  let tempO = o + Math.PI * per
  meteor.x = xMdd + Math.cos(tempO) * fixStar.r
  meteor.y = yMdd + Math.sin(tempO) * fixStar.r
}
// 根据当前情况绘制恒星
function updateFixedStar (fixedStar, comingNum, canvasValue, articleTypeList, fixedStarCtx, fixedStarCanvas, context) {
  for (let i = 1; i < comingNum; i++) {
    let temp = ((2 * fixedStar.r + fixedStar.distance) * i + fixedStar.r) / canvasValue.hypotenuse
    drawFixedStar(temp * canvasValue.width, temp * canvasValue.height, fixedStar.r, articleTypeList[i - 1].title, getColor(fixedStar.colors, i, 1, 1), getOppositeRgb(fixedStar.colors, i, 1, 1), fixedStar, fixedStarCtx)
  }
  context.drawImage(fixedStarCanvas, 0, 0)
}
// 绘制一个流星
function drawMeteor (meteor, per, fixStar, comingNum, context) {
  context.clearRect(0, 0, context.canvas.width, context.canvas.height)
  context.fillStyle = getColor(fixStar.colors, comingNum, per)
  context.beginPath()
  context.arc(meteor.x, meteor.y, meteor.r, 0, 2 * Math.PI)
  context.closePath()
  context.fill()
}
// 绘制一个恒星
function drawFixedStar (x, y, r, text, color, textColor, fixedStar, context) {
  context.fillStyle = color
  // context.beginPath()
  // context.arc(x, y, r, 0, 2 * Math.PI)
  // context.closePath()
  const gradient2 = context.createRadialGradient(x, y, 0, x + r, y + r, r)
  const hue = 217
  gradient2.addColorStop(0.025, '#fff')
  gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)')
  gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)')
  gradient2.addColorStop(1, 'transparent')

  context.fillStyle = gradient2
  context.beginPath()
  context.arc(x, y, r, 0, Math.PI * 2)
  context.fill()

  context.font = '20px Georgia'
  context.fill()
  const maxWidth = fixedStar.r * 1.6
  let width = context.measureText(text).width
  width = width > maxWidth ? maxWidth : width
  context.fillStyle = textColor
  context.fillText(text, x - width / 2, y + 6, maxWidth)
}
// 获取当前流星颜色
function getColor (colors, currentNum, per) {
  let rgb = getRgb(colors, currentNum, per)
  return color(rgb[0], rgb[1], rgb[2])
}
function getOppositeRgb (colors, currentNum, per) {
  let rgb = getRgb(colors, currentNum, per)
  return color(255 - rgb[0], 255 - rgb[1], 255 - rgb[2])
}
// 根据rgb值获取字符串码
function color (red, green, blue) {
  return 'rgb(' + red + ',' + green + ',' + blue + ')'
}
function getRgb (colors, currentNum, per) {
  let colorNum = colors.length
  let preNum = currentNum - 1 % colorNum
  currentNum = currentNum % colorNum
  if (preNum < 0) {
    preNum += colorNum
  }
  if (currentNum < 0) {
    currentNum += colorNum
  }
  let preColor = colors[preNum]
  let currentColor = colors[currentNum]

  let res = []
  res[0] = preColor[0] + (currentColor[0] - preColor[0]) * per
  res[1] = preColor[1] + (currentColor[1] - preColor[1]) * per
  res[2] = preColor[2] + (currentColor[2] - preColor[2]) * per
  return res
}
// 鼠标点击事件
function mouseDown (fixedStar, canvasValue, articleTypeList, event) {
  let x = event.clientX
  let y = event.clientY
  for (let i = 1; i <= fixedStar.num; i++) {
    let temp = ((2 * fixedStar.r + fixedStar.distance) * i + fixedStar.r) / canvasValue.hypotenuse
    let width = temp * canvasValue.width
    let height = temp * canvasValue.height
    if ((x - width) * (x - width) + (y - height) * (y - height) < fixedStar.r * fixedStar.r) {
      console.log('您选择了' + articleTypeList[i - 1].title)
      route.push({path: '/article/list?typeId=' + articleTypeList[i - 1].id})
    }
  }
}
// 同步睡眠
function sleep (mills) {
  let now = new Date().getTime()
  while (true) {
    if (new Date().getTime() > now + mills) {
      return
    }
  }
}
